<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="menu-search">
      <el-form-item label="搜索：">
        <el-select size="small" v-model="formInline.isLock" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="N"></el-option>
          <el-option label="已锁定" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userName" placeholder="输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.userMobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
        <el-button size="small" type="primary" @click="handleunit()">部门设置</el-button>
      </el-form-item>
    </el-form>
    <!--显示的结构集合，如表格-->
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :indent="indent"
      ref="multipleTable"
      @select="rowSelect"
      @select-all="selectAll"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="menuName"
        label="菜单名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="menuUrl"
        label="菜单URL"
        width="300">
      </el-table-column>
      <el-table-column
        label="启用状态">
        <template slot-scope="scope">
          {{scope.row.status == 1 ? '启用' : '禁用'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="描述">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" @click="editChildMenu(scope.row)" size="mini" plain round>编辑</el-button>
          <el-button icon="el-icon-edit" @click="addFunction(item)" size="mini" plain round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-style">


      <el-dialog :visible.sync="editVisible" width="360px">
        <div class="main">
          <div class="add-title">
            <!--<i class="iconfont icon-moban-2"></i><span v-text="editData.functionHead"></span>-->
          </div>
          <div class="add-dictionary">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <div class="form-function">
                <div class="form-inline">
                  <el-form-item label="菜单名称:" prop="userName">
                    <el-input v-model="ruleForm.menuName"></el-input>
                  </el-form-item>
                </div>

              </div>
              <div class="form-function">
                <div class="form-inline">
                  <el-form-item label="菜单Url:" prop="Url">
                    <el-input v-model="ruleForm.menuUrl"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-function">
                <div class="form-inline">
                  <el-form-item label="父菜单:" prop="nickName">
                    <tree-select :options="tableData" :value="ruleForm.parentId" :props="defaultProps" v-on:id="setTreeSelectValue"></tree-select>
                  </el-form-item>
                </div>
              </div>
              <div class="form-function">
                <div class="form-inline">
                  <el-form-item label="菜单序号:" prop="nickName">
                    <el-input v-model="ruleForm.orderNum"></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="form-function">
                <div class="form-inline">
                  <el-form-item label="启用状态:" prop="sex">
                    <el-radio-group v-model="ruleForm.status">
                      <el-radio :label="1">启用</el-radio>
                      <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
              <div class="form-function">
                <el-form-item label="描述:">
                  <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                </el-form-item>
              </div>
              <div class="submit-btn">
                <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
                <el-button type="danger" size="small" @click="closeForm()">关闭</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import TreeSelect from '../../components/admin/TreeSelect.vue'

  export default {
    name: 'MenuManager',
    components: {
      'tree-select': TreeSelect
    },
    data() {
      return {
        // 请求数据参数
        formInline: {
          page: 1,
          limit: 10,
          deptId: '',
          userName: '',
          userMobile: '',
          isLock: ''
        },
        ruleForm: {
          parentId: null
        },
        editData: {
          id:"",
          val: "",
          name: "",
          numbers: "",
          functionHead:""
        },
        editVisible:false,
        rules: {},
        indent: 6,
        tableData: [
          {
            id: 1,
            date: '2016-05-02',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1518 弄'
          }, {
            id: 2,
            date: '2016-05-04',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1517 弄'
          }, {
            id: 3,
            date: '2016-05-01',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1519 弄',
            children: [{
              id: 31,
              date: '2016-05-01',
              menuName: '王小虎',
              url: '上海市普陀区金沙江路 1519 弄',
              children: [{
                id: 222,
                date: '2016-05-01',
                menuName: '王小虎',
                url: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 2322,
                date: '2016-05-01',
                menuName: '王小虎',
                url: '上海市普陀区金沙江路 1519 弄'
              }]
            }, {
              id: 32,
              date: '2016-05-01',
              menuName: '王小虎',
              url: '上海市普陀区金沙江路 1519 弄'
            }]
          }, {
            id: 4,
            date: '2016-05-03',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        defaultProps: {
          value: 'id',
          children: 'children',
          label: 'menuName'
        }
      }
    },
    created() {
      // this.dataInit()
    },
    methods: {
      isMobile() {
        var flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag
      },
      changeSearchShow() {
        this.searchShow = !this.searchShow
      },
      dataInit() {
        var self = this;
        new AjaxRequest({
          type: "post",
          url: api.getMenuTree,
          param: JSON.stringify({}),
          dataType:"json",
          callBack: function(data){
            if (data.status === 1) {
              self.tableData = data.data;
            }
          }
        });
      },
      addFunction() {
        this.editVisible = true
        var data = {
          functionHead: '新增菜单'
        }
        this.editData = data
      },
      editFunction() {
        var self = this;
        var data = self.$refs.multipleTable.selection
        if (data && data.length > 1) {
          self.$notify({
            title: '警告',
            message: '请勾选一条菜单进行编辑',
            type: 'warning'
          });
          return;
        }
        self.editVisible = true
        var param = data[0];
        self.editData.functionHead = '编辑菜单'
        if (param.parentId == 0) {
          param.parentId = null;
        }
        self.ruleForm = param
      },
      deleteFunction() {
        var self = this;
        var data = self.$refs.multipleTable.selection
        if (data && data.length > 0) {
          var ids = "";
          for (var i = 0; i < data.length; i++) {
            if (i != 0) {
              ids += ",";
            }
            ids += data[i].id;
          }
          new AjaxRequest({
            type: "post",
            url: api.batchDeleteMenu,
            param: {ids: ids},
            dataType:"json",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            callBack: function(data){
              if (data.status === 1) {
                // 保存成功 参数重置
                self.$message.success("删除成功")
                location.href = '${ctxPath}/permission/getMenuList'
              }
            }
          });
        }
      },
      editChildMenu(data) {
        var self = this;
        self.editVisible = true
        if (data.parentId == 0) {
          data.parentId = null;
        }
        self.editData.functionHead = '编辑菜单'
        self.ruleForm = data
      },
      closeForm() {
        this.editVisible = false
        this.dataInit()
      },
      load(tree, treeNode, resolve) {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1519 弄',
            hasChildren: true
          }, {
            id: 32,
            date: '2016-05-01',
            menuName: '王小虎',
            url: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      },
      submitForm() {
        var self = this
        new AjaxRequest({
          type: "post",
          url: api.addOrUpdateMenu,
          param: JSON.stringify(self.ruleForm),
          dataType:"json",
          callBack: function(data){
            if (data.status === 1) {
              // 保存成功 参数重置
              self.$message.success('保存成功 !')
              location.href = '${ctxPath}/permission/getMenuList'
            }
          }
        });
      },
      setTreeSelectValue(value) { //
        var self = this
        self.ruleForm.parentId = value
      },
      rowSelect(selection, row) { // 选中单行时，只选中单行
        var self = this;
        // 行选不进行选中所有子菜单
        if (!row.isChecked) {
          self.$refs.multipleTable.toggleRowSelection(row, true) //行变为选中状态
          row.isChecked = true
        } else {
          self.$refs.multipleTable.toggleRowSelection(row, false)
          row.isChecked = false
        }
      },
      selectAll() { // 树形表格选中点击全部勾选全部与取消全部
        var self = this;
        this.$refs.multipleTable.data.map(function (items) {
          //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
          if (!items.isChecked) {
            items.isChecked = true
          } else {
            items.isChecked = false
          }
          if(items.children) {
            self.selectAllChild(items.children)
          }
        })
      },
      selectAllChild(data) {
        var self = this;
        data.map(function (items) {
          //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
          if(items.children) {
            self.selectAllChild(items.children)
          }
          if (!items.isChecked) {
            self.$refs.multipleTable.toggleRowSelection(items, true) //行变为选中状态
            items.isChecked = true
          } else {
            self.$refs.multipleTable.toggleRowSelection(items, false)
            items.isChecked = false
          }
        })
      }
    }

  }
</script>

<style scoped>
  .menu-search {
    margin-top: 20px;
  }
</style>
